<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title></title>
  <meta name="renderer" content="webkit" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
  <link href="/static/css/font.css?v={{data.version}}" rel="stylesheet">
  <link href="/static/css/weadmin.css?v={{data.version}}" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js?v={{data.version}}"></script>
</head>

<body>

<div class="weadmin-nav">
  <span class="layui-breadcrumb">
    <a href="javascript:;">首页</a> <a href="javascript:;">视频管理</a>
    <a href="javascript:;"> <cite>列表</cite></a>
  </span>
  <a class="layui-btn layui-btn-sm" style="margin-top:3px;float:right"
    href="javascript:location.replace(location.href);" title="刷新">
    <i class="layui-icon layui-icon-refresh"></i>
  </a>
</div>

<div class="weadmin-body">
	<div class="layui-row">
    <form class="layui-form layui-col-md12 we-search">
      视频搜索:
      <div class="layui-inline">
        <input type="text" name="username" placeholder="请输入名称" autocomplete="off" class="layui-input" />
      </div>
      <button class="layui-btn" lay-submit="" lay-filter="sreach">
        <i class="layui-icon layui-icon-search"></i>
      </button>
    </form>
  </div>

	<table class="layui-hide" id="video" lay-filter="tableFilter"></table>
</div>

<button style="display: none;" id="video_copys" class="bt_copy" data-clipboard-text=""></button>

<script src="/static/lib/layui/layui.js?v={{data.version}}"></script>
<script src="/static/js/eleDel.js" type="text/javascript"></script>
<script type="text/javascript">
layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider'], function(){
	var laydate = layui.laydate //日期
	  ,laypage = layui.laypage //分页
	  ,layer = layui.layer //弹层
	  ,table = layui.table //表格
	  ,carousel = layui.carousel //轮播
	  ,upload = layui.upload //上传
	  ,element = layui.element //元素操作
	  ,slider = layui.slider //滑块
    ,$ = layui.jquery
  //执行一个 table 实例
  table.render({
    elem: '#video'
    ,height: 420
    ,url: '/video_api/index' //数据接口
    ,title: '列表'
    ,page: true //开启分页
    ,toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
    ,totalRow: true //开启合计行
    ,cols: [[ //表头
      {type: 'checkbox', fixed: 'left'}
      ,{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left', totalRowText: '合计：'}
      ,{field: 'name', title: '名称', width:200}
      ,{field: 'node_num', title: '节点数', width: 100, sort: true, totalRow: true}
      ,{field: 'filename', title: 'md5', width:300}
      ,{field: 'size', title: '文件大小', width: 120, sort: true, totalRow: true}
      ,{field: 'uptime', title: '更新时间', width: 165, sort: true, totalRow: true}
      ,{field: 'addtime', title: '添加时间', width: 165, sort: true, totalRow: true}
      ,{fixed: 'right', width: 310, align:'center', toolbar: '#toolBar'}
    ]]
  });

  table.on("toolbar(tableFilter)", function (obj) {
    let data = obj.data;
    switch (obj.event) {
      case "add":
        apiAdd();
        break;
    }
  });

  table.on("tool(tableFilter)", function (obj) {
    let data = obj.data;
    console.log(obj.event);
    switch (obj.event) {
      case "del":
        apiDel(data.id);break;
      case 'edit':
        apiEdit(data.id);break;
      case 'detail':
        apiPlayer(data);break;
      case 'detail_open':
        apiPlayerOpen(data);break;
      case 'addr':
        apiAddr(data);break;
      case 'node_num':
        apiNodeNum(data.id);break;
    }
  });


  function apiDel(id){
    $.post('/video_api/del',{id:id},function(data){
        data = $.parseJSON(data);
        layer.msg(data.msg);
        setTimeout(function(){
            location.reload();
        },2000);
    });
  }

  function apiEdit(id){
    WeAdminShow('编辑','/video/edit?id='+id ,500, 230);
  }

  function apiPlayer(data){
    var url = '/v/'+data.filename+'/m3u8/index.m3u8'; 
    // console.log(url);
    WeAdminShow('查看['+url+']','/video/player?url='+url ,500, 400);
  }

  function apiPlayerOpen(data){
    var url = '/v/'+data.filename+'/m3u8/index.m3u8'; 
    window.open('/video/player?url='+url);
  }


  function copyText(content){
    var clipboard = new ClipboardJS('#video_copys');
    clipboard.on('success', function (e) {
        layer.msg('复制成功',{icon:1,time:2000});
    });

    clipboard.on('error', function (e) {
        layer.msg('复制失败，浏览器不兼容!',{icon:2,time:2000});
    });
    $("#video_copys").attr('data-clipboard-text',content);
    $("#video_copys").click();
}

  function apiAddr(data){
    var url = location.protocol+"//"+location.host+'/v/'+data.filename+'/m3u8/index.m3u8';

  
    layer.open({
        title: '播放地址'
        ,content: url
        ,id:'addr_cp_id'
        ,btn:['OK','复制']
        ,btn2:function(index,layero){
          copyText(url);
        }
    });
  }

  function apiNodeNum(id){
      WeAdminShow('节点','/video_node/index?id='+id ,800, 300);
  }

///
});

</script>


<script type="text/html" id="toolBar">
  <a class="layui-btn layui-btn-xs" lay-event="node_num">节点</a>
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail_open">打开</a>
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="addr">地址</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
</body>

</html>